<template>
  <ul class="lifeservices">
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">话费</span>
    </li>
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">机票</span>
    </li>
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">电影票</span>
    </li>
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">游戏</span>
    </li>
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">彩票</span>
    </li>
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">加油站</span>
    </li>
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">酒店</span>
    </li>
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">火车票</span>
    </li>
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">众筹</span>
    </li>
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">理财</span>
    </li>
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">礼品卡</span>
    </li>
    <li class="life-item">
      <i class="list-item"></i>
      <span class="service-intro">白条</span>
    </li>
  </ul>
</template>

<script>

</script>

<style scoped lang="less">
.lifeservices {
  border-right: 1px solid #e4e4e4;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;

  .life-item {
    border-left: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    margin-right: -1px;
    height: 64px;
    text-align: center;
    position: relative;
    cursor: pointer;
    width: 25%;

    .list-item {
      background-image: url(./images/icons.png);
      width: 61px;
      height: 40px;
      display: block;
    }

    .service-intro {
      line-height: 22px;
      width: 60px;
      display: block;
    }

    &:nth-child(1) {
      .list-item {
        background-position: 0px -5px;
      }
    }

    &:nth-child(2) {
      .list-item {
        background-position: -62px -5px;
      }
    }

    &:nth-child(3) {
      .list-item {
        background-position: -126px -5px;
      }
    }

    &:nth-child(4) {
      .list-item {
        background-position: -190px -5px;
      }
    }

    &:nth-child(5) {
      .list-item {
        background-position: 0px -76px;
      }
    }

    &:nth-child(6) {
      .list-item {
        background-position: -62px -76px;
      }
    }

    &:nth-child(7) {
      .list-item {
        background-position: -126px -76px;
      }
    }

    &:nth-child(8) {
      .list-item {
        background-position: -190px -76px;
      }
    }

    &:nth-child(9) {
      .list-item {
        background-position: 0px -146px;
      }
    }

    &:nth-child(10) {
      .list-item {
        background-position: -62px -146px;
      }
    }

    &:nth-child(11) {
      .list-item {
        background-position: -126px -146px;
      }
    }

    &:nth-child(12) {
      .list-item {
        background-position: -190px -146px;
      }
    }
  }
}
</style>